<template>
  <div style="position:relative;height: calc(100vh - 100px);background-color: white;">
    <div class="leftPanel">
<!--      <router-view v-slot="{ Component }">-->
<!--        &lt;!&ndash;			<transition :name="setTransitionName" mode="out-in">&ndash;&gt;-->
<!--        <keep-alive>-->
<!--          <component :is="Component"   />-->
<!--        </keep-alive>-->
<!--        &lt;!&ndash;			</transition>&ndash;&gt;-->
<!--      </router-view>-->

      <router-view></router-view>
    </div>
    <div class="rightPanel">
      <div style="width: 100%;">
        <div :class="['itemd',state.activeTab===item.page?'active':'']"  v-for="(item,index) in state.items" :key="index" @click="toPage(item.page, item.title)">{{item.title}}</div>
      </div>
    </div>
  </div>
</template>

<script setup>

// 配送首页菜单
import tool from "@/utils/tool";
import {onBeforeMount, ref} from "vue";
import {useRouter} from "vue-router";
const router = useRouter()
const state = ref({
  show: false,
  topHeight: 100,
  showPrintPop: false,
  printList: [],
  activeTab: 'cargoquick',
  itemHeight: 70,
  sendPrintName:'',
  items: [
    {page: 'cargoquick', title: '扫描装车'},
    {page: 'waitToGo', title: '待派送'},
    // {page: 'wrapperBack', title: '退包装物'},
    // {page: 'sale', title: '零售开单'},
    // {page: 'stj', title: '扫码统计'},
    {page: 'chtj', title: '出货统计'},
    {page: 'shy', title: '送货员'},
    {page: 'sp', title: '商品'},
    {page: 'rk', title: '入库'},
    {page: 'kc', title: '库存'},
    {page: 'sets', title: '设置'},
  ]
})
onBeforeMount(() => {
  let deliver = tool.data.getUser()
  let token = tool.Session.get('token')
  if (!deliver || !token) {
    router.replace({name: 'login'})
  }
})
const toPage = (page, title) => {
  state.value.activeTab = page
  router.push({name: page, query: {title: title, page: page}})
}
</script>

<style scoped lang="scss">
.leftPanel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  padding-right: 5px;
  right: 100px;
  box-sizing: border-box;
}
.rightPanel {
  //border-left: var(--el-border);
  position: absolute;
  right: 0;
  top: 40px;
  bottom: 0;
  width: 100px;
  background-color: rgba(0,0,0,0.02);
}
.itemd {
  height: 70px;
  line-height: 70px;
  padding-left: 5px;
  border-bottom: var(--el-border);
  font-weight: bolder;
  color: #8a8f97;
  font-size: 18px;
  text-align: center;
  &:hover{
    cursor: pointer;
    background-color: #2b85e4;
    color: white;
  }
  &.active {
    background-color: #2b85e4;
    color: white;
  }
}
</style>
